<template>
  <!--播放歌曲页-->
  <div v-if="songUrl" class="waiceng">
    <div v-if="songUrl[index].url">
      <div class="centen">
        <div class="leftImg" v-if="songInfo">
          <dish :info="songInfo"/>
        </div>
        <div class="rightText" v-if="lyricText">
          <lyrics :text='lyricText' :times='playTime'/>
        </div>
      </div>
      <div class="comment" v-if="comments">
        <ul>
          <li v-for="(val,index) in comments" :key="index">
            <comment :infoText='val'/>
          </li>
        </ul>
        
      </div>
      <play :url="songUrl[index].url" v-on:changTime='chang'/>
    </div>
    <div v-else>
      <h2>请开通会员，才可播放</h2>
    </div>
  </div>
</template>

<script>
import require from "requests/getSong";
import play from "components/searchComponents/player";
import dish from "components/playComponent/dish";
import comment from 'components/playComponent/comment';
import lyrics from 'components/playComponent/lyrics'
export default {
  name: "playSong",
  data() {
    return {
      songUrl: null,
      index: 0,
      songInfo: null,
      comments:null,
      lyricText:null,
      playTime:0
    };
  },
  components: {
    play,
    dish,
    comment,
    lyrics
  },
  methods: {
    getUrl(id) {
      require.playUrl(id).then(res => {
        this.songUrl = res.data.data;
        //console.log(this.songUrl);
      });
    },
    getInfo(id) {
      require.songDetails(id).then(res => {
        this.songInfo = res.data.songs[0];
        //console.log(res.data.songs[0])
      });
    },
    getComment(id){
      require.getComment(id).then(res=>{
        this.comments=res.data.hotComments
        //console.log(res.data.hotComments)
      })
    },
    getLyrics(id){
      require.getText(id).then(res=>{
        this.lyricText=res.data.lrc.lyric
        //console.log(this.lyricText)
      })
    },
    chang(val){
      this.playTime=val
    }
  },
  mounted() {
    this.getUrl(this.$route.query.keyWord);
    this.getInfo(this.$route.query.keyWord);
    this.getComment(this.$route.query.keyWord)
    this.getLyrics(this.$route.query.keyWord)
  }
};
</script>

<style lang="less" scoped>
.centen {
  width: 70%;
  height: 500px;
  margin: 0px auto;
  background-color: #dedede;
  .leftImg,
  .rightText {
    width: 40%;
    height: 100%;
    //display: inline-block;
    float: left;
    background-color: #c6c6c6;
    display: flex;
    align-items: center;
  }
  .rightText {
    width: 60%;
    float: right;
    background-color: #dedede;
  }
}
.comment {
  margin: 10px auto;
  width: 70%;
  background: #4caf5047;
  ul{
    margin: 0;
    padding: 0;
    li{
      margin: 10px 0;
    }
  }
}
.waiceng{
  padding-bottom: 60px;
  width: 100%;
  background:#31c27c94;
}
</style>